<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="shortcut icon"
      href="//image.woai996.com/picGo/20210225191131.png"
      type="image/x-icon"
    />
    <link rel="stylesheet" href="./index.css" />
    <title>图片跳转工具</title>
  </head>
  <body>
    <div id="app">
      <div class="pic-wrap">
        <div v-show="ispreview" v-html="imgCode">

        </div>
        <div ref="img" v-show="!ispreview"  class="draw-wrap" :style="gerWrapStyle" >
          <div v-show="showList">
            <div
              v-for="(item,index) in rectList"
              class="rect-item"
              :style="`left: ${item.x}px; top: ${item.y}px; width: ${item.w}px; height: ${item.h}px;border: 3px solid ${item.color};    color: ${item.color}; ;   z-index: ${rectList.length - index};`"
            >
              {{index+1}}
            </div>
          </div>

          <div class="bg" v-show="saveShow"></div>
          <img :src="imgSrc" alt="" @load="imgLoad" @error="handleImgErr"/>
          <div
            class="draw-rect"
            :style="`left: ${rect.x}px; top: ${rect.y}px; width: ${rect.w}px; height: ${rect.h}px`"
          >
            <div class="save-tool" v-show="saveShow">
              <button @click="handleSave">保存</button>
              <button @click="handleCancel">取消</button>
            </div>
          </div>
        </div>
      </div>
      <div class="tool-wrap">
        <h2>工具栏</h2>
        <button @click="clerStore">清除缓存</button>
        <button @click="preview" >
          {{ ispreview? '取消预览':'预览' }}
        </button>
        <div class="showList-tool">
          <label for="showList">是否显示辅助线</label>
          <input type="checkbox" v-model="showList" id="showList" />
        </div>
        <div class="rect-wrap">
          <div v-for="(item,index) in rectList" class="list-item">
            区域{{index+1}}
            <div class="delete">
              <button @click="removeItem(index)">删除</button>
            </div>
            <details>
              <div>x : <input type="number" v-model="item.x" /></div>
              <div>y : <input type="number" v-model="item.y" /></div>
              <div>w : <input type="number" v-model="item.w" /></div>
              <div>h : <input type="number" v-model="item.h" /></div>
              <div>link : <input type="text" v-model="item.link" /></div>
            </details>
          </div>
        </div>

        <div>
          <p>替换图片链接</p>
          <input type="url" v-model="imgSrc">

        </div>

        <div>
          <button @click="createCode">生成代码</button>
        </div>

        <details>
          <summary>注意事项</summary>
          <ul>
            <li> 更换图片链接后会清除所有区域</li>
            <li> 请选择网络图片链接，因为本站暂不提供图片上传功能</li>

          </ul>
        </details>


      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./tool.js"></script>
    <script src="index.js"></script>
  </body>
</html>
